<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
    <el-tab-pane label="算法代码" name="algorithm_code">
      <el-form ref="algorithm_code" :model="latestCode">
        <el-form-item hidden label="">
          <el-input v-model="latestCode.id" ></el-input>
        </el-form-item>
        <el-alert
                title="暂不支持在线算法运行"
                type="error">
        </el-alert>
        <el-form-item label="">
          <el-input type="textarea" v-model="latestCode.algorithm" :autosize="{ minRows: 5, maxRows: 100}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleCodeSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="算法文件" name="command_file">
      <el-form ref="command_file" :model="latestCode">
        <el-form-item hidden label="">
          <el-input v-model="latestCode.id" ></el-input>
        </el-form-item>
        <el-alert
                title="清空算法代码以使用算法文件进行代码生成"
                type="error">
        </el-alert>
        <el-form-item label="算法文件">
          <el-select v-model="latestCode.command" filterable placeholder="请选择算法">
            <el-option
                    v-for="item in commandOptions"
                    :key="item.id"
                    :label="item.command_name"
                    :value="item.command_name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFileSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>      
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    name:'develop_codelabsCommand',
    props: ['latestCode','commandOptions'],
    data() {
      return {
        url: 'codelabs',
        activeName: 'algorithm_code',
      };
    },
    methods: {
      handleClick(tab, event) {
      },
      handleCodeSubmit() {
        if(this.latestCode.id){
          this.$refs['algorithm_code'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,algorithm:this.latestCode.algorithm}
              this.$http.put('codelabs/'+this.latestCode.id, submitData).then(response => {
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
        })
        }else{ //后台默认新建了codelabs,正常情况执行不到这里
          this.$refs['algorithm_code'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,algorithm:this.latestCode.algorithm}
              this.$http.post('codelabs', submitData).then(response => {
                this.latestCode.id = response.data  //这里有bug应该消息回传父组件
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }

      },
      handleFileSubmit() {
        if(this.latestCode.id){
          this.$refs['command_file'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,command:this.latestCode.command}
              this.$http.put('codelabs/'+this.latestCode.id, submitData).then(response => {
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }else{
          this.$refs['command_file'].validate(valid => {
            if (valid) {
              var submitData = {id:this.latestCode.id,command:this.latestCode.command}
              this.$http.post('codelabs', submitData).then(response => {
                this.latestCode.id = response.data
                this.$message.success(response.message)
              })
            } else {
              console.log(valid)
            }
          })
        }
      }
    }
  };
</script>